<template>
  <div>
    <h2 class="index-title" style="padding-top: 10px">快捷菜单</h2>
    <div class="grid_5_column">
      <!-- @click="btnClick(item)" -->
      <div
        v-for="(item, index) of MenuList"
        :key="index"
        class="btn_items"
        @click="go(item)"
      >
        <div>
          <!-- <img v-if="item.srcImg" class="img_style" :src="item.srcImg" /> -->
          <div class="def_style">
            {{ item.defaultSrc }}
          </div>
        </div>
        <div style="margin-left: 15px">
          <div class="flex_y_center">
            <!-- <div class="title_style">{{ item.defaultSrcs }}</div> -->
          </div>
          <div class="introduce_style">{{ item.meta.title }}</div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-between">
      <h2 class="index-title">数据概况</h2>
      <div class="index-search">
        <div style="">
          <el-select
            v-model="valueSlect"
            placeholder="请选择"
            @change="selectChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-show="stare == 'month'"
            v-model="month"
            placeholder="选择月"
            type="month"
            value-format="yyyy-MM-dd"
            @change="monthCheng"
          />
          <el-date-picker
            v-show="stare == 'day'"
            v-model="day"
            placeholder="选择日期"
            type="date"
            value-format="yyyy-MM-dd"
            @change="dayCheng"
          />
          <el-date-picker
            v-show="stare == 'interval'"
            v-model="interval"
            align="right"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
            @change="intervalChange"
          />
        </div>
      </div>
    </div>

    <div>
      <div id="user-grid" class="userstyle styleback">
        <div style="display: flex; align-items: center">
          <div class="widthBox">
            <p class="mls">到店人数</p>
            <div class="fsml">
              {{ dataList.guest_total || 0 }}
            </div>
          </div>
        </div>
        <div id="rect" class="rect">
          <p class="el-icon-user">客户</p>
        </div>
      </div>
      <div id="order-grid" class="userstyle styleback1">
        <div style="display: flex; align-items: center">
          <div class="widthBox">
            <p class="mls">下单人数</p>
            <div class="fsml">
              {{ dataList.order_guest_num || 0 }}
            </div>
          </div>
          <div class="widthBox">
            <p class="mls">下单笔数</p>
            <div class="fsml">
              {{ dataList.order_num || 0 }}
            </div>
          </div>
          <div class="widthBox">
            <p class="mls">下单金额(元)</p>
            <div class="fsml">
              {{ dataList.amount_total || 0 }}
            </div>
          </div>
        </div>
        <div id="rect1" class="rect1">
          <p class="el-icon-sold-out">下单</p>
        </div>
      </div>
      <div id="pay-grid" class="userstyle styleback2">
        <div style="display: flex; align-items: center; width: 90%">
          <div class="widthBox">
            <p class="mls">支付人数</p>
            <div class="fsml">
              {{ dataList.pay_guest_num || 0 }}
            </div>
          </div>
          <div class="widthBox">
            <p class="mls">支付订单数</p>
            <div class="fsml">
              {{ dataList.pay_order_num || 0 }}
            </div>
          </div>
          <div class="widthBox">
            <p class="mls">支付金额(元)</p>
            <div class="fsml">
              {{ dataList.pay_amount_total || 0 }}
            </div>
          </div>
          <div class="widthBox">
            <p class="mls">支付件数</p>
            <div class="fsml">
              {{ dataList.pay_goods_total || 0 }}
            </div>
          </div>
          <div class="widthBox">
            <p class="mls">客单价(元)</p>
            <div class="fsml">
              {{ dataList.guest_unit_price || 0 }}
            </div>
          </div>
        </div>
        <div id="rect0" class="rect0">
          <p class="el-icon-goods">支付</p>
        </div>
      </div>
      <div></div>
    </div>
    <div id="chart_example" v-loading="echartsLoad"></div>
  </div>
</template>

<script>
  import { overview } from '@/api/overviews'
  import * as echarts from 'echarts'
  import { quickMenuList } from '@/api/mechanism'
  //import LeaderLine from 'leader-line-vue'

  export default {
    data() {
      return {
        echartsLoad: false, // 线形图加载样式显示隐藏
        staree: '日',
        dataLists: {},
        dataList: {},
        stare: 'day',
        options: [
          {
            value: 'day',
            label: '自然日',
          },
          {
            value: 'month',
            label: '自然月',
          },
          {
            value: 'interval',
            label: '自定义',
          },
        ],
        valueSlect: '自然日',
        day: '',
        month: '',
        interval: '',
        MenuList: [],
      }
    },
    watch: {},
    mounted() {
      this.init()
    },
    created() {},
    methods: {
      echa() {
        // let this_ = this
        let myChart = echarts.init(document.getElementById('chart_example'))
        let option = {
          title: {
            text: '',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['支付金额', '支付人数', '支付件数', '到店再消费转化率'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dataLists.dataItem,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '支付金额',
              type: 'line',
              stack: 'Total',
              data: this.dataLists.payedAmount,
            },
            {
              name: '支付人数',
              type: 'line',
              stack: 'Total',
              data: this.dataLists.orderUserCnt,
            },
            {
              name: '支付件数',
              type: 'line',
              stack: 'Total',
              data: this.dataLists.payedGoodsCnt,
            },
            {
              name: '到店再消费转化率',
              type: 'line',
              stack: 'Total',
              data: this.dataLists.visitedOrderRate,
            },
          ],
        }

        this.$nextTick(() => {
          myChart.setOption(option)
        })

        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      },
      init(row) {
        quickMenuList().then((e) => {
          this.MenuList = e.data
          for (let item of e.data) {
            item.defaultSrc = item.meta.title.slice(0, 1)
            item.defaultSrcs = item.meta.title.slice(1, 1)
          }
        })
        this.echartsLoad = true
        const datalistes = {
          orderPayedRate: [],
          payedAmount: [],
          orderUserCnt: [],
          payedGoodsCnt: [],
          visitedOrderRate: [],
          dataItem: [],
        }
        overview(row).then((e) => {
          this.dataList = e.data.overview
          e.data.sale_table.forEach((j) => {
            datalistes.dataItem.push(j.id)
            datalistes.orderPayedRate.push(j.orderPayedRate)
            datalistes.payedAmount.push(j.payedAmount)
            datalistes.orderUserCnt.push(j.orderUserCnt)
            datalistes.payedGoodsCnt.push(j.payedGoodsCnt)
            datalistes.visitedOrderRate.push(j.visitedOrderRate)
          })
          this.dataLists = datalistes
          this.echartsLoad = false

          this.$nextTick(() => {
            this.echa()
          })
        })
      },
      // 下拉框选择
      selectChange(e) {
        this.stare = e
      },
      // 自然月事件
      monthCheng(e) {
        const data = {
          month: e,
        }
        this.init(data)
        this.staree = '月'
      },
      // 自然日
      dayCheng(e) {
        const data = {
          day: e,
        }
        this.init(data)
        this.staree = '日'
      },
      // 自定义
      intervalChange(e) {
        const data = {
          interval: e,
        }
        this.init(data)
      },
      go(e) {
        console.log(e)
        // this.query
        this.$router.push(e.path)
      },
    },
  }
</script>

<style scoped>
  .index-title,
  .index-search {
    margin: 20px;
  }
  .el-icon-sold-out,
  .el-icon-user,
  .el-icon-goods {
    font-size: 15px;
    position: relative;

    color: rgb(255, 255, 255);
  }
  .el-icon-sold-out {
    top: -97px;
    right: -15px;
  }
  .el-icon-user {
    top: -97px;
    right: -25px;
  }
  .el-icon-goods {
    top: -97px;
    right: -5px;
  }
  #chart_example {
    padding-top: 50px;
    width: 100%;
    height: 500px;
    /* border: 1px solid red; */
    margin: 0 auto;
  }
  .userstyle {
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 150px;
    margin-top: 4px;
  }
  .styleback {
    background: linear-gradient(-84deg, transparent 55px, rgb(243, 247, 253) 0);
  }
  .styleback1 {
    background: linear-gradient(-84deg, transparent 55px, rgb(240, 248, 240) 0);
  }
  .styleback2 {
    background: linear-gradient(-84deg, transparent 55px, rgb(242, 242, 250) 0);
  }
  .rect {
    border-top: 150px solid #57a9fb;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 150px;
    width: 120px;
    margin-bottom: 4px;
  }
  .rect1 {
    border-top: 150px solid #66be74;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 150px;
    width: 100px;
    /* margin-bottom: 4px; */
    margin-right: 10px;
  }
  .rect0 {
    border-top: 150px solid #6c6ca7;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 150px;
    width: 80px;
    /* margin-bottom: 4px; */
    margin-right: 20px;
  }
  .mls {
    color: #646566;
    margin-left: 20px;
  }
  .ml50 {
    margin-left: 50px;
  }
  .widthBox {
    width: 200px;
    margin-left: 50px;
  }
  .fsml {
    font-size: 20px;
    margin-left: 20px;
  }

  .flex_y_center {
    display: flex;
    align-items: center;
  }
  .grid_5_column {
    /* display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px; */
    display: flex;
    margin-left: 10px;
    padding-top: 10px;
  }

  .btn_items {
    width: 160px;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(204, 204, 204, 0.137);
    cursor: pointer;
    transition: 0.5s;
    display: flex;
    align-items: center;
    margin-left: 10px;
  }
  .btn_items:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .img_style {
    width: 50px;
    height: 50px;
  }
  .def_style {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    font-weight: 600;
    background-color: lightblue;
    border-radius: 5px;
  }
  .title_style {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .introduce_style {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
</style>
